<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>生产管理</el-breadcrumb-item><el-breadcrumb-item>工艺流程</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
        <!-- 搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryRoute" class="demo-form-inline">
            <el-form-item label="工序编码">
                <el-input v-model="queryRoute.routeCode" placeholder="请输入工艺路线编号" clearable />
            </el-form-item>
            <el-form-item label="工序名称">
                <el-input v-model="queryRoute.routeName" placeholder="请输入工艺路线名称" clearable />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-select v-model="queryRoute.enableFlag" placeholder="请选择是否启用">
                    <el-option label="是" value="y" />
                    <el-option label="否" value="n" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadRoutes">搜索</el-button>
                <el-button @click="handleReset"><el-icon>
                        <refresh />
                    </el-icon>重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 搜索栏结束 -->
        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增工艺流程" @click="this.addRouteDialogVisible = true" type="primary"><el-icon>
                    <Plus />
                </el-icon></el-button>
            <el-button @click="handlerEditDicts" title="编辑选中工序" type="primary"><el-icon>
                    <EditPen />
                </el-icon></el-button>
            <el-button @click="handlerDeleteDicts" title="删除选中工序" type="primary"><el-icon>
                    <Delete />
                </el-icon></el-button>
        </div>
        <!-- 工具栏结束 -->

        <!-- 表格 开始 -->
        <el-table ref="routeTable" :data="routes" stripe="true" border="true" style="width: 100%;margin-top: 10px;">
            <el-table-column type="selection" width="55" />
            <el-table-column label="#" property="routeId" />
            <el-table-column label="工艺路线编号" property="routeCode">
                <template #default="scope">
                    <el-link type="success" @click="showRouteData(scope.row.routeId)">
                        {{ scope.row.routeCode }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column label="工艺路线名称" property="routeName" />
            <el-table-column label="工艺路线说明" property="routeDesc" />
            <el-table-column label="是否启用" property="enableFlag">
                <template #default="scope">
                    <!-- scope.row 就是整行数据-->
                    <el-tag v-if="scope.row.enableFlag == 'y'" class="ml-2" type="success">是</el-tag>
                    <el-tag v-else class="ml-2" type="danger">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="备注" property="remark" />
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="showRoute(scope.row)">修改</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->
        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="routeLimit" :pager-count="routeMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="routeTotal" />
        <!-- 分页栏结束 -->
        <!-- 添加工艺流程的弹窗窗体开始-->
        <el-dialog v-model="addRouteDialogVisible" title="添加工艺流程" width="1000" align-center>
            <!-- 添加工艺流程的表单 -->
            <el-form label-width="100px" :model="newRoute" style="max-width: 960px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="编号">
                            <el-input v-model="newRoute.routeCode" placeholder="请输入工艺路线编号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-switch @change="autoGenRouteCode" v-model="autoRouteCode" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                        <span>自动生成</span>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="名称">
                            <el-input v-model="newRoute.routeName" placeholder="请输入工艺路线名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否启用">
                            <el-radio-group v-model="newRoute.enableFlag">
                                <el-radio label="y">是</el-radio>
                                <el-radio label="n">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="说明">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="newRoute.routeDesc" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="newRoute.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddRoute">取消</el-button>
                    <el-button type="primary" @click="doAddRoute">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加工艺流程的弹窗窗体结束-->

        <!-- 编辑工序的弹窗开始-->
        <el-dialog v-model="routeManagerDialogVisible" title="修改工艺路线" width="80%" align-center>
            <template #header>
                <h4>修改工艺路线</h4>
            </template>
            <template #default>
                <div>
                    <!-- 编辑工序的表单 -->
                    <el-form label-width="100px" :model="editRoute" style="max-width: 860px">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="编号">
                                    <el-input v-model="editRoute.routeCode" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="名称">
                                    <el-input v-model="editRoute.routeName" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="是否启用">
                                    <el-radio-group v-model="editRoute.enableFlag" class="ml-4">
                                        <el-radio :label="status[0]" size="large">是</el-radio>
                                        <el-radio :label="status[1]" size="large">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="说明">
                            <el-input type="textarea" :rows="3" v-model="editRoute.routeDesc" />
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="editRoute.remark" />
                        </el-form-item>
                    </el-form>
                </div>
                <el-tabs type="border-card">
                    <el-tab-pane label="组成工序">
                        <div class="flex">
                            <el-button title="添加工艺组成" @click="this.addRouteProcessDialogVisible = true"
                                type="primary"><el-icon>
                                    <Plus />
                                </el-icon></el-button>
                            <el-button @click="handlerEditDicts" title="编辑选中工序" type="primary"><el-icon>
                                    <EditPen />
                                </el-icon></el-button>
                            <el-button @click="handlerDeleteDicts" title="删除选中工序" type="primary"><el-icon>
                                    <Delete />
                                </el-icon></el-button>
                        </div>
                        <!-- 组成工序数据表格 开始 -->
                        <el-table ref="routeProcessTable" :data="routeProcesses" max-height="800px" stripe="true"
                            border="true" style="width: 100%;margin-top: 10px;">
                            <el-table-column align="center" type="selection" width="55" />
                            <el-table-column fixed align="center" label="序号" property="orderNum" width="80" />
                            <el-table-column fixed align="center" label="工序编码" property="processCode" width="120" />
                            <el-table-column fixed align="center" label="工序名称" property="processName" width="120" />
                            <el-table-column align="center" label="下一道工序" property="nextProcessName" width="150" />
                            <el-table-column align="center" label="与下一道工序的关系" property="linkType" width="120" />
                            <el-table-column label="工序关键" property="keyFlag" width="100">
                                <template #default="scope">
                                    <!-- scope.row 就是整行数据-->
                                    <el-tag v-if="scope.row.keyFlag == 'n'" class="ml-2" type="success">是</el-tag>
                                    <el-tag v-else class="ml-2" type="danger">否</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="准备时间" property="defaultPreTime" width="100" />
                            <el-table-column align="center" label="等待时间" property="defaultSufTime" width="100" />
                            <el-table-column align="center" label="甘特图显示颜色" property="colorCode">
                                <el-color-picker v-model="colorCode" show-alpha disabled />
                            </el-table-column>
                            <el-table-column fixed="right" width="150" align="center" label="操作">
                                <template #default="scope">
                                    <el-button size="small" @click="showRouteProcessContent(scope.row)">编辑</el-button>
                                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                                        @confirm="handleRouteProcessDelete(scope.row)" title="您是否要删除这行数据">
                                        <template #reference>
                                            <el-button size="small" type="danger">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 关联产品数据表格结束 -->
                    </el-tab-pane>
                    <el-tab-pane label="关联产品">
                        <!-- 搜索栏开始 -->
                        <el-form style="margin-top: 15px;" :inline="true" :model="queryRouteProduct"
                            class="demo-form-inline">
                            <el-form-item label="产品物料编码">
                                <el-input v-model="queryRouteProduct.itemCode" placeholder="请输入产品物料编码" clearable />
                            </el-form-item>
                            <el-form-item label="产品物料名称">
                                <el-input v-model="queryRouteProduct.itemName" placeholder="请输入产品物料名称" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="loadRouteProducts">搜索</el-button>
                                <el-button @click="handleReset"><el-icon>
                                        <refresh />
                                    </el-icon>重置</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 搜索栏结束 -->
                        <!-- 工具栏开始 -->
                        <el-button title="新增工艺流程" @click="this.addRouteProductDialogVisible = true" type="primary"><el-icon>
                                <Plus />
                            </el-icon></el-button>
                        <el-button @click="handlerEditDicts" title="编辑选中工序" type="primary"><el-icon>
                                <EditPen />
                            </el-icon></el-button>
                        <el-button @click="handlerDeleteDicts" title="删除选中工序" type="primary"><el-icon>
                                <Delete />
                            </el-icon></el-button>
                        <!-- 工具栏结束 -->
                        <!-- 关联产品数据表格 开始 -->
                        <el-table ref="routeProductTable" :data="routeProducts" max-height="800px" stripe="true"
                            border="true" style="width: 100%;margin-top: 10px;">
                            <el-table-column align="center" type="selection" width="55" />
                            <el-table-column align="center" label="产品物料编码" property="itemCode" />
                            <el-table-column align="center" label="产品物料名称" property="itemName" />
                            <el-table-column align="center" label="规格型号" property="specification" />
                            <el-table-column align="center" label="单位" property="unitOfMeasure" />
                            <el-table-column width="150" align="center" label="操作">
                                <template #default="scope">
                                    <el-button size="small" @click="showRouteProductContent(scope.row)">编辑</el-button>
                                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                                        @confirm="handleRouteProductDelete(scope.row)" title="您是否要删除这行数据">
                                        <template #reference>
                                            <el-button size="small" type="danger">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 关联产品数据表格结束 -->
                    </el-tab-pane>
                </el-tabs>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="doRouteEdit">提交</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 编辑工序的弹窗弹窗结束-->

        <!-- 添加工艺组成的弹窗窗体开始-->
        <el-dialog v-model="addRouteProcessDialogVisible" title="添加工艺组成" width="1000" align-center>
            <!-- 添加工艺组成的表单 -->
            <el-form label-width="100px" :model="newRouteProcess" style="max-width: 8000px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="序号">
                            <el-input-number v-model="newRouteProcess.orderNum" :min="1" :max="100"
                                @change="handleChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label-width="150" label="工序">
                            <el-select v-model="newRouteProcess.processName" placeholder="请选择工序">
                                <el-option v-for="items in processes" :key="items.processId" :label="items.processName"
                                    :value="items.processName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label-width="150" label="与下一道工序的关系">
                            <el-tooltip placement="right">
                                <template #content> S-to-S:当前工序开始生产,下一道工序才可开始生产<br />
                                    F-to-F:当前工序结束生产,下一道工序才可结束生产<br />
                                    S-to-F:当前工序开始生产,下一道工序才可结束生产<br />
                                    F-to-S:当前工序结束生产,下一道工序才可开始生产<br /></template>
                                <el-select v-model="newRouteProcess.linkType" placeholder="请选择与下一道工序的关系">
                                    <el-option label="S-To-S" value="S - To - S" />
                                    <el-option label="F-To-F" value="F - To - F" />
                                    <el-option label="S-To-F" value="S - To - F" />
                                    <el-option label="F-To-S" value="F - To - S" />
                                </el-select>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label-width="150" label="甘特图显示颜色">
                            <el-color-picker v-model="newRouteProcess.colorCode" show-alpha />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4"></el-col>
                </el-row>
                <el-form-item label-width="150" label="是否关键工序" >
                    <el-tooltip placement="right">
                        <template #content> 是：整个工单的生产进度将根据当前工序的生产报工数量进行更新<br />
                            每个工艺流程只能有一个关键工序</template>
                        <el-select v-model="newRouteProcess.keyFlag" placeholder="请选择">
                            <el-option label="是" value="y" />
                            <el-option label="否" value="n" />
                        </el-select>
                    </el-tooltip>
                </el-form-item>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="准备时间">
                            <el-input-number v-model="newRouteProcess.defaultPreTime" :min="1" :max="100"
                                @change="handleChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="等待时间">
                            <el-input-number v-model="newRouteProcess.defaultSufTime" :min="1" :max="100"
                                @change="handleChange" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="2" v-model="newRouteProcess.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddRouteProcess">取消</el-button>
                    <el-button type="primary" @click="doAddRouteProcess">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加工艺组成的弹窗窗体结束-->

        <!-- 编辑组成工艺的弹窗开始-->
        <el-dialog v-model="routeProcessManagerDialogVisible" title="修改工艺组成" width="80%" align-center>
            <template #default>
                <div>
                    <!-- 编辑组成工艺的表单 -->
                    <el-form label-width="100px" :model="editRouteProcess" style="max-width: 900px;">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label-width="150" label="序号">
                                    <el-input v-model="editRouteProcess.orderNum" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="150" label="工序">
                                    <el-select v-model="editRouteProcess.processName">
                                        <el-option v-for="items in processes" :key="items.processId"
                                            :label="items.processName" :value="items.processName"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label-width="150" label="与下一道工序的关系">
                                    <el-select v-model="editRouteProcess.linkType">
                                        <el-option label="S-To-S" :value="S - To - S" />
                                        <el-option label="F-To-F" :value="F - To - F" />
                                        <el-option label="S-To-F" :value="2" />
                                        <el-option label="F-To-S" :value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="150" label="甘特图显示颜色">
                                    <el-color-picker v-model="editRouteProcess.colorCode" show-alpha />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 15px;">
                            <el-col :span="12">
                                <el-form-item label-width="150" label="是否是关键工序">
                                    <el-radio-group v-model="editRouteProcess.keyFlag">
                                        <el-radio :label="status[0]" size="large">是</el-radio>
                                        <el-radio :label="status[1]" size="large">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="150" label="是否需要质检确认">
                                    <el-radio-group v-model="editRouteProcess.keyFlag" class="ml-4">
                                        <el-radio :label="status[0]" size="large">是</el-radio>
                                        <el-radio :label="status[1]" size="large">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 15px;">
                            <el-col :span="12">
                                <el-form-item label="准备时间">
                                    <el-input-number v-model="editRouteProcess.defaultPreTime" :min="1" :max="100"
                                        @change="handleChange" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="等待时间">
                                    <el-input-number v-model="editRouteProcess.defaultSufTime" :min="1" :max="100"
                                        @change="handleChange" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="2" v-model="editRouteProcess.remark" />
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelRouteProcessEdit">取消</el-button>
                    <el-button type="primary" @click="doRouteProcessEdit">提交</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 编辑组成工艺的弹窗弹窗结束-->

        <!-- 添加关联产品的弹窗窗体开始-->
        <el-dialog v-model="addRouteProductDialogVisible" title="添加工艺组成" width="800" align-center>
            <!-- 添加关联产品的表单 -->
            <el-form label-width="100px" :model="newRouteProduct" style="max-width: 8000px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="产品物料编码">
                            <el-input v-model="newRouteProduct.itemCode">
                                <template #append>
                                    <el-button @click="this.bomAddItemDialogVisible = true">
                                        <el-icon>
                                            <Search />
                                        </el-icon></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品物料名称">
                            <el-input v-model="newRouteProduct.itemName" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单位">
                            <el-input v-model="newRouteProduct.unitOfMeasure" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="规格">
                    <el-input type="textarea" :rows="2" v-model="newRouteProduct.specification" disabled />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="3" v-model="newRouteProcess.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddRouteProduct">取消</el-button>
                    <el-button type="primary" @click="doAddRouteProduct">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加关联产品的弹窗窗体结束-->

        <!-- bom新增物料产品的弹窗窗体开始-->
        <el-dialog v-model="bomAddItemDialogVisible" title="BOM组成选择" width="1200" style="height: 800px;">
            <el-container>
                <el-aside width="200">
                    <!-- 分类树 -->
                    <el-tree ref="tree" :data="itemTypes" :expand-on-click-node="false" node-key="itemTypeId"
                        :props="defaultProps" @node-click="optionItemByTree" default-expand-all style="margin-top: 70px;" />
                </el-aside>

                <el-main width="1000">
                    <!-- 搜索栏开始 -->
                    <el-form :inline="true" :model="search">
                        <el-form-item label="物料编码">
                            <el-input v-model="search.itemCode" placeholder="请输入物料编码" />
                        </el-form-item>
                        <el-form-item label="物料名称">
                            <el-input v-model="search.itemName" placeholder="请输入物料名称" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="loadItem"><el-icon>
                                    <search />
                                </el-icon>搜索</el-button>
                            <el-button @click="handleReset"><el-icon>
                                    <refresh />
                                </el-icon>重置</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 搜索栏结束 -->
                    <!-- 新增BOM表格 开始 -->
                    <el-table ref="addBOMTable" :data="items">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="物料编码" property="itemCode" width="90" />
                        <el-table-column label="物料名称" property="itemName" width="120" />
                        <el-table-column label="规格型号" property="specification" width="100" />
                        <el-table-column label="单位" property="unitOfMeasure" width="70" />
                        <el-table-column label="物料/产品" property="itemOrProduct" width="110" />
                        <el-table-column label="所属分类" property="itemTypeName" width="100" />
                        <el-table-column label="创建时间" :formatter="timeFormatter" property="createTimeMillis" />
                    </el-table>
                    <!-- 新增BOM表格 结束 -->
                    <!-- 分页栏开始 -->
                    <el-pagination style="margin-top: 15px;" :page-size="10" :pager-count="maxPageNum"
                        @current-change="changePage" background layout="prev, pager, next" :total="total" />
                    <!-- 分页栏结束 -->
                </el-main>
            </el-container>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddBOM">取消</el-button>
                    <el-button type="primary" @click="doAddBOM">添加</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 新增物料产品的弹窗窗体结束 -->
        <!-- 编辑关联产品的弹窗窗体开始-->
        <el-dialog v-model="editRouteProductDialogVisible" title="编辑工艺组成" width="800" align-center>
            <!-- 编辑关联产品的表单 -->
            <el-form label-width="100px" :model="editRouteProduct" style="max-width: 8000px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="产品物料编码">
                            <el-input v-model="editRouteProduct.itemCode">
                                <template #append>
                                    <el-button @click="this.bomAddItemDialogVisible = true">
                                        <el-icon>
                                            <Search />
                                        </el-icon></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品物料名称">
                            <el-input v-model="editRouteProduct.itemName" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单位">
                            <el-input v-model="editRouteProduct.unitOfMeasure" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="规格">
                    <el-input type="textarea" :rows="2" v-model="editRouteProduct.specification" disabled />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="3" v-model="editRouteProduct.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelEditRouteProduct">取消</el-button>
                    <el-button type="primary" @click="doEditRouteProduct">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加关联产品的弹窗窗体结束-->

    </div>
</template>
<script>
import routeRequest from '../../../api/route-api'
import routeProcessRequest from '../../../api/route-process-api'
import routeProductRequest from '../../../api/route-product-api'
import itemTypeRequest from '../../../api/mdItemType-api.js';
import itemRequest from '../../../api/mdItem-api.js';
import processRquest from '../../../api/process-api';
export default {
    data() {
        return {
            queryRoute: {},
            routes: [],
            routeCurrPage: 1, // 工艺流程分页的当前页码
            routeLimit: 10, // 工艺流程分页的每页大小
            routeTotal: 0, // 工艺流程列表的总条数
            routeMaxPage: 1,//工艺流程列表的最大页码
            // 新增工艺流程相关属性
            addRouteDialogVisible: false,// 新增工艺流程的弹窗标志
            newRoute: {
                routeCode: undefined
            },
            status: ['y', 'n'],

            //编辑工艺流程
            routeManagerDialogVisible: false,
            editRoute: {},
            //组成工序相关属性
            routeProcesses: [],
            addRouteProcessDialogVisible: false,//添加
            newRouteProcess: {},
            processes: [],
            currRouteProcess: {},
            //编辑工艺组成的属性
            routeProcessManagerDialogVisible: false,//编辑组成工序的弹窗
            editRouteProcess: {},

            //关联产品相关的属性
            routeProducts: [],
            queryRouteProduct: {},
            addRouteProductDialogVisible: false,
            newRouteProduct: {},
            currRouteProduct: {},
            editRouteProductDialogVisible: false,
            editRouteProduct: {},

            //物料弹窗
            bomAddItemDialogVisible: false,
            bomAddItem: {}, // bom组成新增的对象
            itemTypes: [],// 分类菜单的所有数据
            defaultProps: {
                children: 'children',// 孩子节点集合的属性名
                label: 'itemTypeName',// 对应的文本的属性名
            },
            page: 1, // 页数
            limit: 10, // 每页条数
            total: 0, // 总条数
            maxPageNum: 1, // 最大页数
            items: [], // 查询到的数据
            search: {},// 搜索栏对象
            currItemId: {},

            autoRouteCode: false,
        }

    },
    methods: {
        /**
     * 加载工艺流程数据
     */
        loadRoutes() {
            routeRequest.list(this.routeCurrPage, this.routeLimit,
                this.queryRoute, res => {
                    // 设置数据
                    this.routes = res.data.list;
                    this.routeTotal = res.data.total;
                    this.routeMaxPage = res.data.pages;
                });
        },
        /**
     * 加载关联产品数据
     */
        loadRouteProducts(routeId) {
            console.log(routeId);
            routeProductRequest.list(routeId, res => {
                this.routeProducts = res.data;
            });
        },
        /**
     * 条件搜索重置按钮事件
     */
        handleReset() {
            this.queryRoute = {};
            this.loadRoutes(true);
            this.queryRouteProduct = {};

        },
        /**
         * 新增工艺流程的提交按钮事件
         */
        doAddRoute() {
            // 数据校验：略
            // 提交数据
            routeRequest.save(this.newRoute, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddRoute();
                    // 重新加载数据
                    this.loadRoutes();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 取消新增工艺流程的按钮事件
         */
        cancelAddRoute() {
            // 关闭窗体
            this.addRouteDialogVisible = false;
            // 清空newRoute
            this.newRoute = {};
        },
        /**
         * 自动生成生产工单编号
         * @param {*} val 
         */
        autoGenRouteCode(val) {
            if (val) {
                routeRequest.genRouteCode(res => {
                    this.newRoute.routeCode = res.data;
                });
            }
        },
        /**
         * 行编辑按钮事件
         * @param {*} row 整行数据
         */
        handleDelete(row) {
            routeRequest.delete(row.routeId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadRoutes();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
     * 点击工艺流程编辑的事件
     * @param {*} processId
     */
        showRoute(row) {
            routeRequest.get(row.routeId, res => {
                this.editRoute = res.data;
            });
            console.log(row.routeId);
            this.routeManagerDialogVisible = true;
            this.loadRouteProcess(row.routeId);
            this.currRouteProcess = row;
            this.loadRouteProducts(row.routeId);
            this.currRouteProduct = row;
        },
        /**
     * 取消编辑操作
     */
        cancelEdit() {
            // 将编辑的操作流程制空
            this.editRoute = {};
            // 关闭弹窗
            this.routeManagerDialogVisible = false;
        },
        /**
     * 取消编辑操作
     */
        cancelRouteProcessEdit() {
            this.editRouteProcess = {};
            this.routeProcessManagerDialogVisible = false;
        },
        /**
           * 操作流程编辑提交按钮事件
           */
        doRouteEdit() {
            // 提交editProcess即可
            routeRequest.edit(this.editRoute, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.routeManagerDialogVisible = false;
                    // 重新加载数据
                    this.loadRoutes();
                    // 将editUser制空
                    this.editRoute = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 加载组成工序数据列表
         * @param {*} routeId 
         */
        loadRouteProcess(routeId) {
            console.log(routeId);
            routeProcessRequest.list(routeId, res => {
                this.routeProcesses = res.data;
            });
        },
        /**
    * 加载工序数据
    */
        loadProcesses() {
            processRquest.list(this.processCurrPage, this.processLimit,
                this.queryProcess, res => {
                    // 设置数据
                    this.processes = res.data.list;
                    this.processTotal = res.data.total;
                    this.processMaxPage = res.data.pages;
                });
        },
        /**
     * 取消新增工艺组成的按钮事件
     */
        cancelAddRouteProcess() {
            // 关闭窗体
            this.addRouteProcessDialogVisible = false;
            // 清空newDict
            this.newRouteProcess = {};
        },
        /**
         * 新增工艺组成的提交按钮事件
         */
        doAddRouteProcess() {
            // 数据校验：略
            // 提交数据
            this.newRouteProcess.routeId = this.currRouteProcess.routeId;
            console.log(this.newRouteProcess);
            routeProcessRequest.save(this.newRouteProcess, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddRouteProcess();
                    // 重新加载数据
                    this.loadRouteProcess(this.currRouteProcess.routeId);// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 点击编辑的事件，数据管理
         * @param {*} row 
         */
        showRouteProcessContent(row) {
            console.log(row.recordId);
            routeProcessRequest.get(row.recordId, res => {
                this.editRouteProcess = res.data;
            });
            this.routeProcessManagerDialogVisible = true;
            this.loadRouteProcess(row.routeId);
            //this.currContent = row;
        },
        /**
        * 编辑工艺组成提交按钮事件
        */
        doRouteProcessEdit() {
            console.log(this.editRouteProcess);
            // 提交editProcess即可
            routeProcessRequest.edit(this.editRouteProcess, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑用户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.routeProcessManagerDialogVisible = false;
                    // 重新加载数据
                    this.loadRouteProcess(this.editRouteProcess.routeId);
                    // 将editUser制空
                    this.editRouteProcess = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '用户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 删除工艺组成的事件
         * @param {*} row 
         */
        handleRouteProcessDelete(row) {
            routeProcessRequest.delete(row.recordId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadRouteProcess(row.routeId);
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
         * 删除关联产品的事件
         * @param {*} row 
         */
        handleRouteProductDelete(row) {
            routeProductRequest.delete(row.recordId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadRouteProducts(row.routeId);
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
    * 加载树菜单页面数据
    */
        loadItemType(isReal) {
            if (this.itemTypes == undefined || this.itemTypes.length == 0 || isReal) {
                itemTypeRequest.getAllItemTypes(res => {
                    this.itemTypes = res.data;
                })
            }
        },
        /**
         * 加载表格数据
         */
        loadItem() {
            itemRequest.list(this.page, this.limit, this.search, res => {
                this.items = res.data.list;
                this.total = res.data.total;
                this.maxPageNum = res.data.pages;
            })
        },
        /**
     * 新增物料bom取消按钮事件
     */
        cancelAddBOM() {
            this.bomAddItemDialogVisible = false;
        },
        /**
     * 新增物料bom提交按钮事件
     */
        doAddBOM() {
            let table = this.$refs.addBOMTable; // 获取新增BOM的表格对象
            let rows = table.getSelectionRows(); // 通过API获取被选中的数据
            this.newRouteProduct.itemCode = rows[0].itemCode;
            this.newRouteProduct.itemName = rows[0].itemName;
            this.newRouteProduct.unitOfMeasure = rows[0].unitOfMeasure;
            this.newRouteProduct.specification = rows[0].specification;
            this.currItemId = rows[0].itemId;
            console.log(this.currItemId);
            this.editRouteProduct.itemCode = rows[0].itemCode;
            this.editRouteProduct.itemName = rows[0].itemName;
            this.editRouteProduct.unitOfMeasure = rows[0].unitOfMeasure;
            this.editRouteProduct.specification = rows[0].specification;
            this.bomAddItemDialogVisible = false;
        },
        /**
     * 取消新增关联产品的按钮事件
     */
        cancelAddRouteProduct() {
            // 关闭窗体
            this.addRouteProductDialogVisible = false;
            // 清空newDict
            this.newRouteProduct = {};
        },
        /**
         * 新增关联产品的提交按钮事件
         */
        doAddRouteProduct() {
            // 数据校验：略
            // 提交数据
            this.newRouteProduct.routeId = this.currRouteProduct.routeId;
            this.newRouteProduct.itemId = this.currItemId;
            console.log(this.newRouteProduct);
            routeProductRequest.save(this.newRouteProduct, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddRouteProduct();
                    // 重新加载数据
                    this.loadRouteProducts(this.currRouteProduct.routeId);// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
    * 取消编辑关联产品的按钮事件
    */
        cancelEditRouteProduct() {
            // 关闭窗体
            this.editRouteProductDialogVisible = false;
            // 清空newDict
            this.editRouteProduct = {};
        },
        /**
         * 点击编辑的事件，数据管理
         * @param {*} row 
         */
        showRouteProductContent(row) {
            console.log(row.recordId);
            routeProductRequest.get(row.recordId, res => {
                this.editRouteProduct = res.data;
            });
            this.editRouteProductDialogVisible = true;
            this.loadRouteProducts(row.routeId);
            //this.currContent = row;
        },
        /**
        * 编辑关联产品提交按钮事件
        */
        doEditRouteProduct() {
            this.editRouteProduct.itemId = this.currItemId;
            console.log(this.editRouteProduct);
            // 提交editRouteProduct即可
            routeProductRequest.edit(this.editRouteProduct, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑用户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.editRouteProductDialogVisible = false;
                    // 重新加载数据
                    this.loadRouteProducts(this.editRouteProduct.routeId);
                    // 将editRouteProduct制空
                    this.editRouteProduct = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '用户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },

    },
    mounted() {
        this.loadRoutes();
        this.loadProcesses();
        this.loadItemType();
        this.loadItem();

    }
}


</script>